<template>
  <Sidebar ref="sidebar" :title="$t('message.xmindMap.basicStyle')">
    <div class="sidebarContent" v-if="data">
      <!-- 背景 -->
      <div class="title noTop">{{$t('message.xmindMap.background')}}</div>
      <div class="row">
        <el-tabs class="tab" v-model="activeTab">
          <el-tab-pane :label="$t('message.xmindMap.colour')" name="color">
            <Color
              :color="style.backgroundColor"
              @change="
                (color) => {
                  update('backgroundColor', color);
                }
              "
            ></Color>
          </el-tab-pane>
          <el-tab-pane :label="$t('message.xmindMap.image')" name="image">
            <ImgUpload
              class="imgUpload"
              v-model:value="style.backgroundImage"
              @change="
                (img) => {
                  update('backgroundImage', img);
                }
              "
            ></ImgUpload>
            <div class="rowItem">
              <span class="name">{{$t('message.xmindMap.imageDuplication')}}</span>
              <el-select
                size="mini"
                style="width: 120px"
                v-model="style.backgroundRepeat"
                placeholder=""
                @change="
                  (value) => {
                    update('backgroundRepeat', value);
                  }
                "
              >
                <el-option
                  v-for="item in backgroundRepeatList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 连线 -->
      <div class="title noTop">{{$t('message.xmindMap.ligature')}}</div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.colour')}}</span>
          <span
            class="block"
            v-popover:popover
            :style="{ backgroundColor: style.lineColor }"
          ></span>
          <el-popover ref="popover" placement="bottom" trigger="click">
            <Color
              :color="style.lineColor"
              @change="
                (color) => {
                  update('lineColor', color);
                }
              "
            ></Color>
          </el-popover>
        </div>
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.thickness')}}</span>
          <el-select
            size="mini"
            style="width: 80px"
            v-model="style.lineWidth"
            placeholder=""
            @change="
              (value) => {
                update('lineWidth', value);
              }
            "
          >
            <el-option
              v-for="item in lineWidthList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.style')}}</span>
          <el-select
            size="mini"
            style="width: 80px"
            v-model="style.lineStyle"
            placeholder=""
            @change="
              (value) => {
                update('lineStyle', value);
              }
            "
          >
            <el-option
              v-for="item in lineStyleList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 概要连线 -->
      <div class="title noTop">{{$t('message.xmindMap.outlineConnection')}}</div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.colour')}}</span>
          <span
            class="block"
            v-popover:popover2
            :style="{ backgroundColor: style.generalizationLineColor }"
          ></span>
          <el-popover ref="popover2" placement="bottom" trigger="click">
            <Color
              :color="style.generalizationLineColor"
              @change="
                (color) => {
                  update('generalizationLineColor', color);
                }
              "
            ></Color>
          </el-popover>
        </div>
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.thickness')}}</span>
          <el-select
            size="mini"
            style="width: 80px"
            v-model="style.generalizationLineWidth"
            placeholder=""
            @change="
              (value) => {
                update('generalizationLineWidth', value);
              }
            "
          >
            <el-option
              v-for="item in lineWidthList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 内边距 -->
      <div class="title noTop">{{$t('message.xmindMap.nodeInnerMargin')}}</div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.horizontal')}}</span>
          <el-slider
            style="width: 200px"
            v-model="style.paddingX"
            @change="
              (value) => {
                update('paddingX', value);
              }
            "
          ></el-slider>
        </div>
      </div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.vertical')}}</span>
          <el-slider
            style="width: 200px"
            v-model="style.paddingY"
            @change="
              (value) => {
                update('paddingY', value);
              }
            "
          ></el-slider>
        </div>
      </div>
      <!-- 图片 -->
      <div class="title noTop">{{$t('message.xmindMap.image')}}</div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.showMaxWidth')}}</span>
          <el-slider
            style="width: 140px"
            v-model="style.imgMaxWidth"
            :min="10"
            :max="300"
            @change="
              (value) => {
                update('imgMaxWidth', value);
              }
            "
          ></el-slider>
        </div>
      </div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.showMaxHeight')}}</span>
          <el-slider
            style="width: 140px"
            v-model="style.imgMaxHeight"
            :min="10"
            :max="300"
            @change="
              (value) => {
                update('imgMaxHeight', value);
              }
            "
          ></el-slider>
        </div>
      </div>
      <!-- 图标 -->
      <div class="title noTop">{{$t('message.xmindMap.icon')}}</div>
      <div class="row">
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.size')}}</span>
          <el-slider
            style="width: 200px"
            v-model="style.iconSize"
            :min="12"
            :max="50"
            @change="
              (value) => {
                update('iconSize', value);
              }
            "
          ></el-slider>
        </div>
      </div>
      <!-- 二级节点外边距 -->
      <div class="title noTop">{{$t('message.xmindMap.nodeOuterMargin')}}</div>
      <div class="row column">
        <el-tabs
          class="tab"
          v-model="marginActiveTab"
          @tab-click="initMarginStyle"
        >
          <el-tab-pane :label="$t('message.xmindMap.secondaryNode')" name="second"></el-tab-pane>
          <el-tab-pane :label="$t('message.xmindMap.thirdLevelNode')" name="node"></el-tab-pane>
        </el-tabs>
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.horizontal')}}</span>
          <el-slider
            :max="200"
            style="width: 200px"
            v-model="style.marginX"
            @change="
              (value) => {
                updateMargin('marginX', value);
              }
            "
          ></el-slider>
        </div>
        <div class="rowItem">
          <span class="name">{{$t('message.xmindMap.vertical')}}</span>
          <el-slider
            :max="200"
            style="width: 200px"
            v-model="style.marginY"
            @change="
              (value) => {
                updateMargin('marginY', value);
              }
            "
          ></el-slider>
        </div>
      </div>
    </div>
  </Sidebar>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  nextTick,
  getCurrentInstance
} from 'vue' 
import type { ComponentInternalInstance } from 'vue' 
import Sidebar from "./Sidebar.vue";
import Color from "./Color.vue";
import {
  lineWidthList,
  lineStyleList,
  backgroundRepeatList
} from "./config";
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import ImgUpload from "@/components/ImgUpload/index.vue";
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  data: {
    type: [Object, null],
    default: null,
  },
  mindMap: {
    type: Object,
  },
  activeSidebar:String
})

const activeTab = ref("color")
const marginActiveTab = ref("second")
const sidebar = ref()
const style = ref({
  backgroundColor: "",
  lineColor: "",
  lineWidth: "",
  lineStyle: "",
  generalizationLineWidth: "",
  generalizationLineColor: "",
  paddingX: 0,
  paddingY: 0,
  imgMaxWidth: 0,
  imgMaxHeight: 0,
  iconSize: 0,
  backgroundImage: "",
  backgroundRepeat: "no-repeat",
  marginX: 0,
  marginY: 0,
})

watch(()=>props.activeSidebar,(newV)=>{
  if (newV === 'baseStyle') {
    sidebar.value.show = true
  } else {
    sidebar.value.show = false
  }
})

onMounted(()=>{
  proxy.$eventBus.$on("showBaseStyle", () => {
    sidebar.value.show = false;
    nextTick(() => {
      sidebar.value.show = true;
      initStyle();
    });
  });
})

function initStyle() {
  [
    "backgroundColor",
    "lineWidth",
    "lineStyle",
    "lineColor",
    "generalizationLineWidth",
    "generalizationLineColor",
    "paddingX",
    "paddingY",
    "imgMaxWidth",
    "imgMaxHeight",
    "iconSize",
    "backgroundImage",
    "backgroundRepeat",
  ].forEach((key) => {
    style.value[key] = props.mindMap.getThemeConfig(key);
    if (key === "backgroundImage" && style.value[key] === "none") {
      style.value[key] = "";
    }
  });
  initMarginStyle();
}
function initMarginStyle() {
  ["marginX", "marginY"].forEach((key) => {
    style.value[key] =
      props.mindMap.getThemeConfig()[marginActiveTab.value][key];
  });
}
function update(key, value) {
  if (key === "backgroundImage" && value === "none") {
    style.value[key] = "";
  } else {
    style.value[key] = value;
  }
  props.data.theme.config[key] = value;
  props.mindMap.setThemeConfig(this.data.theme.config);
  // storeConfig({
  //   theme: {
  //       "template": props.mindMap.getTheme(),
  //       "config": this.data.theme.config
  //   }
  // });
}
function updateMargin(type, value) {
  style.value[type] = value;
  if (!props.data.theme.config[marginActiveTab.value]) {
    props.data.theme.config[marginActiveTab.value] = {};
  }
  props.data.theme.config[marginActiveTab.value][type] = value;
  props.mindMap.setThemeConfig(props.data.theme.config);
}

</script>
<style lang="scss" scoped>
.sidebarContent {
  padding: 20px;
  padding-top: 10px;

  .title{
    font-size: 16px;
    @include fontFamily;
    font-weight: 500;
    color: rgba(26, 26, 26, 0.9);
    margin-bottom: 10px;
    margin-top: 20px;

    &.noTop {
      margin-top: 0;
    }
  }

  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    &.column {
      flex-direction: column;
    }

    .tab {
      width: 100%;
    }

    .imgUpload {
      margin-bottom: 5px;
    }

    .btnGroup {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .rowItem {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      .name {
        font-size: 12px;
        margin-right: 10px;
      }

      .block {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
      }
    }

    .styleBtn {
      position: relative;
      width: 50px;
      height: 30px;
      background: #fff;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;

      &.actived {
        background-color: #eee;
      }

      .colorShow {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
      }
    }
  }
}
</style>
